﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .m {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px
    }

    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
        text-decoration: none;
        font: 16px '微软雅黑';
    }
    /*外层盒子和里边图片的一点点样式*/

    .jqueryzoom {
        position: relative;
        padding: 0;
        border: solid 1px #eaeaea;
        width: 300px;
        height: 300px;
        overflow: hidden;
        display: inline-block;
    }
    /*放大镜是基于图片大小自动生成的，每次都要把jqueryzoom中img的大小和jqueryzoom盒子大小设置为一样的，不然放大镜滑块有可能溢出*/

    .jqueryzoom img {
        width: 300px;
    }

    ul li {
        float: left;
        margin-right: 5px;
    }

    ul li img {
        width: 100px;
        height: 100px;
    }

    .cloudzoom-gallery-active {
        opacity: .5
    }
    </style>
    <!--引入cloudzoom的css和js，顺序不要错，先css，再jQuery再cloudzoom的js，这个cloudzoom也是需要jQuery支持的，其实很多插件都是基于jQuery开发的-->
    <link href="cloudzoom.css" rel="stylesheet" />
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="cloudzoom.js"></script>
    <!--启动CloudZoom就可以了，quickStart()立即启动-->
    <script type="text/javascript">
    CloudZoom.quickStart();
    </script>
</head>

<body>
    <div class="m">
        <div class="jqueryzoom">
            <img id="img" class="cloudzoom" src="images/a1.png" data-cloudzoom="zoomSizeMode:'image',zoomImage: 'images/a1.png',autoInside: 30" alt="呵呵哒" title="" /> </div>
        <!--想切换多张图片，只需要改下面img中src中的路径，以及data-cloudzoom中两个img的路径，注意data-cloudzoom要和img中的路径一摸一样-->
        <ul>
            <li>
                <img class="cloudzoom-gallery" src="images/a1.png" data-cloudzoom="useZoom:'.cloudzoom',image:'images/a1.png',zoomImage:'images/a1.png'" />
            </li>
            <li>
                <img class="cloudzoom-gallery" src="images/a2.png" data-cloudzoom="useZoom:'.cloudzoom',image:'images/a2.png',zoomImage:'images/a2.png'" />
            </li>
            <li>
                <img class="cloudzoom-gallery" src="images/a3.png" data-cloudzoom="useZoom:'.cloudzoom',image:'images/a3.png',zoomImage:'images/a3.png'" />
            </li>
            <li>
                <img class="cloudzoom-gallery" src="images/a4.png" data-cloudzoom="useZoom:'.cloudzoom',image:'images/a4.png',zoomImage:'images/a4.png'" />
            </li>
        </ul>
    </div>
</body>

</html>
